// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 修改选择器以匹配新的导航结构
   // 同时选择两个导航栏的链接
const navLinks = document.querySelectorAll('.top-nav a, .nav-links a');
    
    // 为每个链接添加点击事件
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            // 阻止默认跳转行为
            e.preventDefault();
            
            // 获取目标ID
            const targetId = this.getAttribute('href');
            
            // 找到目标元素
            const targetElement = document.querySelector(targetId);
            
            // 如果目标元素存在，滚动到该元素
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth', // 平滑滚动
                    block: 'start' // 对齐方式：顶部对齐
                });
            }
            
            // 更新活跃状态
            navLinks.forEach(item => {
                item.classList.remove('active');
            });
            this.classList.add('active');
        });
    });
    
    // 监听滚动事件，自动更新活跃状态
    window.addEventListener('scroll', function() {
        const scrollPosition = window.scrollY + 100; // 增加偏移量，提升用户体验
        
        // 遍历所有导航链接，检查哪个部分在当前视图中
        navLinks.forEach(link => {
            const targetId = link.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                const targetTop = targetElement.offsetTop;
                const targetHeight = targetElement.offsetHeight;
                
                // 检查当前滚动位置是否在目标元素范围内
                if (scrollPosition >= targetTop && scrollPosition < targetTop + targetHeight) {
                    link.classList.add('active');
                } else {
                    link.classList.remove('active');
                }
            }
        });
    });
});
